<template>
  <div class="cart-container">
    <table class="book-table">
      <thead>
        <tr>
          <th v-for="(item, index) in title" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in bookList" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.date }}</td>
          <td>{{ item.price }}</td>
          <td><button @click="add(index)">+</button> {{ item.num }} <button @click="jian(index)">-</button></td>
          <td><button @click="remove(index)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    title() {
      return this.$store.state.title
    },
    bookList() {
      return this.$store.state.bookList
    }
  },
  methods: {
    // ...mapMutations(['add', 'jian'])
    // remove() {}
    ...mapActions(['add', 'jian']),
    ...mapMutations(['remove'])
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-container {
  text-align: center;
}
.book-table {
  margin: auto;
  text-align: center;
  border: 1px solid #ccc;
  border-collapse: collapse;
  td,
  th {
    border-bottom: 1px solid #ccc;
    padding: 15px 60px;
    button {
      width: 50px;
      height: 30px;
      cursor: pointer;
      border: none;
    }
  }
  tr:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
</style>